{% extends 'oratk_app/master.html' %}
{% block tag_left %}
    {% include 'oratk_app/tag_left_user.html' %}
{% endblock %}
{% block title %}
    <title>ORATK</title>
{% endblock %}
{% block userinfo %}

    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">AWR报告</h3>
        <form name="Form" role="search">
            <div class="navbar-form navbar-left">
                <div>
                    <label>请选择实例名：</label>
                    <select class="selectpicker show-tick " style="width:300px;" data-live-search="true"
                            name="conn_string"
                            id="awr_conn_string">
                        <option id="def">--请选择实例名--</option>
                        {% for i in instanceinfo_result %}
                            <option id="a">{{ i.dbname }}={{ i.conn_string }}</option>
                        {% endfor %}
                    </select>
                    &nbsp&nbsp
                    &nbsp&nbsp
                    <label class="form-check-label">RAC模式</label>
                    <input type="checkbox" class="form-check-input" id="rac_mode" name="option1" value="something"
                           disabled>
                    &nbsp&nbsp
                    &nbsp&nbsp
                    <span id="snapshot_config" style="color: red"></span>
                </div>

                <div>&nbsp</div>
                <div><label>快照天数：</label>
                    <input type="text" name="snapshot_day_id" id="snapshot_day_id" class="form-control"
                           style="width: 100px"
                           onkeyup="this.value=this.value.replace(/\D/g,'')"
                           placeholder="默认3天">
                    &nbsp&nbsp
                    <label>快照区间：</label>
                    <select class="selectpicker show-tick" data-width="400px" data-live-search="true" data
                            name="snapshot_list"
                            id="snapshot_list" multiple data-max-options="2">
                        <option id="def" disabled selected="selected" style='display:none;'>--请选择快照区间--</option>
                    </select>
                    &nbsp&nbsp
                    <label>报告格式：</label>
                    <select class="selectpicker show-tick" data-width="80px" data-live-search="true"
                            id="awr_report_content_type">
                        <option>html</option>
                        <option>text</option>
                    </select>
                    &nbsp
                    <button type="button" class="btn btn-primary" id="awr_report">生成报告</button>
                </div>
                &nbsp
                <div><span style="color: #337AB7;font-size: 12px">Note: RAC模式为集群中所有实例生成awr报告和一份RAC全局awr报告</span></div>
            </div>
        </form>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">ASH报告</h3>
        <form name="Form" role="search" action="/oratk_app/oratk_most_plan_ajax" onsubmit="return validateForm()"
              target="_blank" method="POST">
            <div class="navbar-form navbar-left">
                <div>
                    <label>请选择实例名：</label>
                    <select class="selectpicker show-tick " style="width:300px;" data-live-search="true"
                            name="conn_string"
                            id="ash_conn_string">
                        <option id="def">--请选择实例名--</option>
                        {% for i in instanceinfo_result %}
                            <option id="a">{{ i.dbname }}={{ i.conn_string }}</option>
                        {% endfor %}
                    </select>
                    &nbsp&nbsp
                    &nbsp&nbsp
                    <label class="form-check-label" hidden>RAC模式</label>
                    <input type="checkbox" class="form-check-input" id="rac_mode_ash" name="option1" value="something"
                           disabled hidden>
                    &nbsp&nbsp
                    &nbsp&nbsp
                    <span id="ash_config" style="color: red"></span>
                </div>
                &nbsp&nbsp
                <div>
                    <label>请选择时间段：</label>
                    <input type="text" id="run_date_range" readonly=""
                           placeholder="请选择可执行时间范围"
                           style="width:300px; background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);"
                           class="form-control ">
                    &nbsp&nbsp
                    <label>报告格式：</label>
                    <select class="selectpicker show-tick" data-width="80px" data-live-search="true"
                            id="ash_report_content_type">
                        <option>html</option>
                        <option>text</option>
                    </select>
                    &nbsp
                    <button type="button" class="btn btn-primary" id="ash_report">生成报告</button>
                </div>
                &nbsp
                <div ><span style="color: #337AB7;font-size: 12px">Note: 实例只能生成本实例自己的ASH报告</span></div>
            </div>
        </form>
    </div>
    <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        <h3 class="page-header">awr&ash 历史记录</h3>
        <div class="col-md-12 column" id="table_pagination">
            {% include 'basic_app/search_ajax.html' %}
            <table class="table table-striped table-bordered table-hover">
                <thead>
                <tr>
                    <th>数据库</th>
                    <th>连接串</th>
                    <th>任务类型 _ 格式</th>
                    <th>任务模式</th>
                    <th>快照区间</th>
                    <th>时间区间</th>
                    <th>查看报告内容</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody id="tabbody">
                {% for i in current_page %}
                    <tr>
                        {#                        <td><input type="checkbox"/></td>#}
                        <td style="display:none">{{ i.id }}</td>
                        <td>{{ i.dbinfo }}</td>
                        <td>{{ i.conn_str }}</td>
                        <td>{{ i.report_type }}_{{ i.report_format }}</td>
                        <td>{{ i.inst_type|default_if_none:"" }}</td>
                        <td>{{ i.snapshot_range |default_if_none:"" }}</td>
                        <td>{{ i.date_range }}</td>
                        <td>
                            <a style="cursor:pointer"
                               href="/oratk_app/oratk_most_get_awr_ash_report_ajax?nid={{ i.id }}"
                               target="_blank">查看报告内容</a>
                        </td>
                        <td>{{ i.crtime }}</td>
                        <td>
                            <a onclick="if(confirm('确认删除吗？')==false)return false; else oratk_awr_ash_report_delete({{ i.id }})">删除</a>
                            <span> | </span> <a href="/oratk_app/oratk_most_awr_ash_report_download?nid={{ i.id }}">下载</a></td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>
            {#分页#}
            {% include 'basic_app/paginator_common_ajax.html' %}
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        //awr&ash
        function awr() {
            var snapshot_day = $('#snapshot_day_id').val();
            if (!snapshot_day) {
                var snapshot_day = 3;
            }
            awr_conn_string_check = $('#awr_conn_string').find("option:checked").attr("id");
            if (awr_conn_string_check !== 'def') {
                $.ajax({
                    type: "POST",
                    data: {
                        'awr_conn_string': $('#awr_conn_string').val(),
                        'snapshot_day': snapshot_day
                    },
                    url: "/oratk_app/oratk_most_awr_select_snapshot_ajax", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    beforeSend: function () {
                        showLoading()
                    },
                    complete: function () {
                        hideLoading()
                    },
                    success: function (result) {
                        $("#snapshot_list").append().html(result)
                        //使用refresh方法更新UI以匹配新状态。
                        $('#snapshot_list').selectpicker('refresh');
                        //render方法强制重新渲染引导程序 - 选择ui。
                        $('#snapshot_list').selectpicker('render');

                        //rac模式选项是否启用
                        var rac_mode = document.getElementById("instance_info").getAttribute("instance_type");
                        if (rac_mode == 'RAC') {
                            $('#rac_mode').removeAttr('disabled');
                        } else {
                            $("#rac_mode").attr("disabled", "disabled");
                        }
                        //显示snapshot的配置信息
                        var snapshot_config = document.getElementById("instance_info").getAttribute("snapshot_config");
                        $('#snapshot_config').html(snapshot_config)
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                })
            } else {
                $('#snapshot_list').empty()
                $("#snapshot_list").append('<option id="def"  id="def" disabled selected="selected" style=\'display:none;\' >--请选择snapshot--</option>')
                //使用refresh方法更新UI以匹配新状态。
                $('#snapshot_list').selectpicker('refresh');
                //render方法强制重新渲染引导程序 - 选择ui。
                $('#snapshot_list').selectpicker('render');
                //快照配置信息置为空
                $('#snapshot_config').html('')
            }

        }

        function ash() {
            ash_conn_string_check = $('#ash_conn_string').find("option:checked").attr("id");
            if (ash_conn_string_check !== 'def') {
                $.ajax({
                    type: "POST",
                    data: {
                        'ash_conn_string': $('#ash_conn_string').val()
                    },
                    url: "/oratk_app/oratk_most_get_ash_config_ajax", //后台处理函数的url
                    cache: false,
                    dataType: "html",
                    beforeSend: function () {
                        showLoading()
                    },
                    complete: function () {
                        hideLoading()
                    },
                    success: function (result) {
                        var result_dic = JSON.parse(result)
                        if (result_dic.code_status == 'SUCCESS') {
                            var result_ash_mintime_info = result_dic.result_ash_mintime_info
                            var rac_mode = result_dic.instance_type
                            //rac模式选项是否启用
                            if (rac_mode == 'RAC') {
                                $('#rac_mode_ash').removeAttr('disabled');
                            } else {
                                $("#rac_mode_ash").attr("disabled", "disabled");
                            }
                            //显示ash的配置信息
                            $('#ash_config').html(result_ash_mintime_info)
                        } else {
                            var err_info = result_dic.error_info
                            alert(err_info)
                        }
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status);
                        alert(XMLHttpRequest.readyState);
                        alert(textStatus);
                    },
                })
            } else {
                //快照配置信息置为空
                $('#ash_config').html('')
            }

        }

        //选择实例时,显示快照区间和snapshot的配置信息
        $('#awr_conn_string').change(function () {

            //显示快照区间信息
            awr()
            $("#rac_mode").removeAttr('checked')

        })
        //变更快照天数时
        $('#snapshot_day_id').change(function () {
            awr_conn_string_check = $('#awr_conn_string').find("option:checked").attr("id");
            if (awr_conn_string_check !== 'def') {
                awr()
            }
        })
        //点击生成awr报告
        $('#awr_report').click(function () {
            //获取实例
            var awr_conn_string_check = $('#awr_conn_string').find("option:checked").attr("id")
            if (awr_conn_string_check == 'def') {
                alert('请选择实例')
                return;
            }
            //获取快照id
            var snapshot_val = $('#snapshot_list').val();
            if (!snapshot_val) {
                alert('请选择快照区间')
                return;
            } else {
                var snapshot_val_list = Array.from(snapshot_val)
                if (snapshot_val_list.length == 1) {
                    alert('请选择正确的快照区间 \n "选择两个快照"')
                    return
                }
            }
            //获取是否为rac模式
            var rac_mode_status = $("#rac_mode").prop("checked");
            if (!rac_mode_status) {
                var rac_mode_status_value = 0
            } else {
                var rac_mode_status_value = 1
            }

            //获取快照格式
            var report_content_type = $('#awr_report_content_type').val();
            snapshot_val_list = JSON.stringify(snapshot_val)
            $.ajax({
                type: "POST",
                data: {
                    'awr_report_tag': 'YES',
                    'conn_string': $('#awr_conn_string').val(),
                    snapshot_val_list: snapshot_val_list,
                    'rac_mode_status_value': rac_mode_status_value,
                    'report_content_type': report_content_type
                },
                url: "/oratk_app/oratk_most_awr_ash_report_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                traditional: true,  //防止深度序列化,能够发送js中的 array
                beforeSend: function () {
                    showLoading()
                    $('#awr_report').button('loading')
                },
                complete: function () {
                    hideLoading()
                    $('#awr_report').button('reset')
                },
                success: function (result) {
                    $('#myModal').modal('hide');
                    var result_reg = /^ERR:/
                    if (result_reg.test(result)) {
                        alert(result)
                    } else {
                        $("#table_pagination").html(result)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
            })
        })

        //ash
        //选择实例时,显示ash最小时间和是否为rac
        $('#ash_conn_string').change(function () {
            ash()
            $("#rac_mode_ash").removeAttr('checked')

        })

        //生成ash报告
        $('#ash_report').click(function () {
            var ash_conn_string_check = $('#ash_conn_string').find("option:checked").attr("id")
            if (ash_conn_string_check == 'def') {
                alert('请选择实例');
                return;
            }
            var run_date_range = $('#run_date_range').val();
            if (run_date_range == '请选择可执行时间范围') {
                alert('请选择可执行时间范围')
                return;
            }
            if (!run_date_range) {
                alert('请选择可执行时间范围')
                return;
            }
            //获取快照格式
            var report_content_type = $('#ash_report_content_type').val();
            //获取是否为rac模式
            var rac_mode_status = $("#rac_mode_ash").prop("checked");
            if (!rac_mode_status) {
                var rac_mode_status_value = 0
            } else {
                var rac_mode_status_value = 1
            }
            $.ajax({
                type: "POST",
                data: {
                    'ash_report_tag': 'YES',
                    'conn_string': $('#ash_conn_string').val(),
                    'run_date_range': run_date_range,
                    'report_content_type': report_content_type,
                    'rac_mode_status_value': rac_mode_status_value
                },
                url: "/oratk_app/oratk_most_awr_ash_report_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                traditional: true,  //防止深度序列化,能够发送js中的 array
                beforeSend: function () {
                    showLoading()
                    $('#awr_report').button('loading')
                },
                complete: function () {
                    hideLoading()
                    $('#awr_report').button('reset')
                },
                success: function (result) {
                    $('#myModal').modal('hide');
                    var result_reg = /^ERR:/
                    if (result_reg.test(result)) {
                        alert(result)
                    } else {
                        $("#table_pagination").html(result)
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                },
            })
        })


        // awr&ash 历史记录 delete
        function oratk_awr_ash_report_delete(id) {
            var nid = id;
            $.ajax({
                type: "POST",
                data: {
                    'nid': nid,
                    'delete_tag': 'YES'
                },
                url: "/oratk_app/oratk_most_awr_ash_report_ajax", //后台处理函数的url
                cache: false,
                dataType: "html",
                success: function (result) {
                    $("#table_pagination").html(result);
                }
            })
        }



    </script>



    <script>
        $("#run_date_range").daterangepicker({
            timePicker: true,
            timePicker24Hour: true,
            autoApply: true,
            autoUpdateInput: false,
            opens: "right",
            drops: "down",
            maxDate: moment().startOf('seconds'),
            startDate: moment().startOf('hour'),
            endDate: moment().startOf('seconds'),
            locale: {
                "applyLabel": "确定",
                "cancelLabel": "清空",
                "daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
                "monthNames": ["一月", "二月", "三月", "四月", "五月", "六", "七月", "八月", "九月", "十月", "十一月", "十二月"],
                "firstDay": 1
            },
        }).on('apply.daterangepicker', function (ev, picker) {
            $(this).css("color", "#333");
            $("#run_date_start").val(picker.startDate.format('YYYY-MM-DD HH:mm:ss'));
            $("#run_date_end").val(picker.endDate.format('YYYY-MM-DD HH:mm'));
            $(this).val(picker.startDate.format('YYYY-MM-DD HH:mm:ss') + ' / ' + picker.endDate.format('YYYY-MM-DD HH:mm:ss'));
        }).on('cancel.daterangepicker', function (ev, picker) {
            $(this).css("color", "#999");
            $(this).val('请选择可执行时间范围');
        });
    </script>
{% endblock %}